<template>
  <div class="scroll-wrap">
    <div class="scroll-content">
      <el-table
        class="scroll-ul bottom-table selectOption"
        :data="tableDataA"
        border
        style="
          width: 100%;
          margin: 0 auto;
          --el-table-border-color: none;
          --el-table-bg-color: none;
          --el-table-tr-bg-color: none;
        "
        :row-class-name="tableRowClassName"
        :header-row-class-name="tableHeaderRowClassName"
        :cell-style="{
          color: '#FFFFFF',

          'font-family': 'DINPro',
        }"
        :header-cell-style="{
          backgroundColor: 'transparent !important',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          backgroundSize: 'auto',
          height: '100%',
        }"
      >
        <el-table-column width="200" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>
              {{ Object.keys(scope.row)[0] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="planDate"
          show-overflow-tooltip
          width="250"
          align="center"
        >
          <template #default="scope">
            <span v-if="scope.row[Object.keys(scope.row)[0]] === false">
              否</span
            >
            <span v-else-if="scope.row[Object.keys(scope.row)[0]] === true">
              是
            </span>
            <span v-else-if="scope.row[Object.keys(scope.row)[0]] !== ''">
              {{
                typeof scope.row[Object.keys(scope.row)[0]] === "number"
                  ? String(scope.row[Object.keys(scope.row)[0]]).includes(".")
                    ? Big(scope.row[Object.keys(scope.row)[0]]).toFixed(2)
                    : scope.row[Object.keys(scope.row)[0]]
                  : scope.row[Object.keys(scope.row)[0]]
              }}
            </span>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="meltedStatus" label="熔炼">
            <template #default="scope">
              <span v-if="isShowPercentage(scope.row)">
                <el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="PercentageData(scope.row)"
                /> </span></template
          ></el-table-column> -->
      </el-table>
      <el-table
        class="scroll-ul bottom-table selectOption"
        :data="tableDataB"
        border
        style="
          width: 100%;
          margin: 0 auto;
          --el-table-border-color: none;
          --el-table-bg-color: none;
          --el-table-tr-bg-color: none;
        "
        :row-class-name="tableRowClassName"
        :header-row-class-name="tableHeaderRowClassName"
        :cell-style="{
          color: '#FFFFFF',

          'font-family': 'DINPro',
        }"
        :header-cell-style="{
          backgroundColor: 'transparent !important',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          backgroundSize: 'auto',
          height: '100%',
        }"
      >
        <el-table-column width="200" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>
              {{ Object.keys(scope.row)[0] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="planDate"
          show-overflow-tooltip
          width="250"
          align="center"
        >
          <template #default="scope">
            <span v-if="scope.row[Object.keys(scope.row)[0]] === false">
              否</span
            >
            <span v-else-if="scope.row[Object.keys(scope.row)[0]] === true">
              是
            </span>
            <span v-else-if="scope.row[Object.keys(scope.row)[0]] !== ''">
              {{
                typeof scope.row[Object.keys(scope.row)[0]] === "number"
                  ? String(scope.row[Object.keys(scope.row)[0]]).includes(".")
                    ? Big(scope.row[Object.keys(scope.row)[0]]).toFixed(2)
                    : scope.row[Object.keys(scope.row)[0]]
                  : scope.row[Object.keys(scope.row)[0]]
              }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        class="scroll-ul bottom-table selectOption"
        :data="tableDataC"
        border
        style="
          width: 100%;
          margin: 0 auto;
          --el-table-border-color: none;
          --el-table-bg-color: none;
          --el-table-tr-bg-color: none;
        "
        :row-class-name="tableRowClassName"
        :header-row-class-name="tableHeaderRowClassName"
        :cell-style="{
          color: '#FFFFFF',

          'font-family': 'DINPro',
        }"
        :header-cell-style="{
          backgroundColor: 'transparent !important',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'center',
          backgroundSize: 'auto',
          height: '100%',
        }"
      >
        <el-table-column width="250" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>
              {{ Object.keys(scope.row)[0] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="planDate"
          show-overflow-tooltip
          width="250"
          align="center"
        >
          <template #default="scope">
            <span v-if="scope.row[Object.keys(scope.row)[0]] === false">
              否</span
            >
            <span v-else-if="scope.row[Object.keys(scope.row)[0]] === true">
              是
            </span>
            <span v-else-if="scope.row[Object.keys(scope.row)[0]] !== ''">
              {{
                typeof scope.row[Object.keys(scope.row)[0]] === "number"
                  ? String(scope.row[Object.keys(scope.row)[0]]).includes(".")
                    ? Big(scope.row[Object.keys(scope.row)[0]]).toFixed(2)
                    : scope.row[Object.keys(scope.row)[0]]
                  : scope.row[Object.keys(scope.row)[0]]
              }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { deepClone } from "@/utils/commonHooks";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import dayjs from "dayjs";
import { Row } from "element-plus/es/components/table-v2/src/components";
import { backgroundClip } from "html2canvas/dist/types/css/property-descriptors/background-clip";
const dictionaryStore = useDictStoreHook();
import Big from "big.js";
const props = defineProps({
  // table数据
  planBIDTOS: {
    type: Object,
    default: () => {},
  },
  // table显示行数
  tableColumnNum: {
    type: Number,
    default: 10,
  },
});

const isParse = ref(false);
const { planBIDTOS, tableColumnNum } = toRefs(props);
const tableDataA = ref<any>([]);
const tableDataB = ref<any>([]);
const tableDataC = ref<any>([]);

const tableObject = {
  planDate: "",
  schedule: "",
  productCode: "",
  productName: "",
  moldMaterialCode: "",
  assetCode: "",
  assetName: "",
  assetLifespan: "",
  cumulativeUseTimes: "",
  taskStatus: "",
  useProgress: "",
};

const scrollKey = ref<number>(1);

let mm = {
  id: null,
  createTime: null,
  createdUserId: null,
  lastUpdateTime: null,
  lastUpdatedUserId: null,
  a1: "M_01",
  a2: "M_02",
  a3: "M_03",
  a4: "M_04",
  a5: "M_05",
  a6: "M_06",
  a7: "M_07",
  a8: "M_08",
  a9: "M_09",
  a10: "M_10",
  a11: "M_11",
  a12: "M_12",
  a13: "M_13",
  a14: "M_14",
  a15: "M_15",
  a16: "999",
  a17: "2025-08-12 13:19:10",
  b1: "M_16",
  b2: "M_17",
  b3: "M_18",
  b4: "M_19",
  b5: "M_20",
  b6: "M_21",
  b7: "M_22",
  b8: "M_23",
  b9: "M_24",
  b10: "M_25",
  b11: "M_26",
  b12: "M_27",
  b13: "M_28",
  b14: "M_29",
  b15: "M_30",
  b16: "888",
  b17: "2026-08-21 14:53:41",
  c1: "M_31",
  c2: "M_32",
  c3: "M_33",
  c4: "M_34",
  c5: "M_35",
  c6: "M_36",
  c7: "M_37",
  c8: "M_38",
  c9: "M_39",
  c10: "M_40",
  c11: "M_41",
  c12: "M_42",
  c13: "M_43",
  c14: "M_44",
  c15: "M_45",
  c16: "777",
  c17: "2025-08-14 18:12:10",
  gatherTime: null,
};

let mmA = [
  "A覆盖剂配方",
  "A覆盖剂实际",
  "A配方覆盖剂设定值",
  "A配方球化剂设定值",
  "A配方选择",
  "A配方孕育剂设定值",
  "A球化剂配方",
  "A球化剂实际",
  "A孕育剂配方",
  "A孕育剂实际",
  "A产品代号",
  "A包次实际",
  "A包次设定",
  "A配方孕育剂上工差",
  "A配方孕育剂下工差",
  "出铁目标重量",
  "出铁目标时间",
];
let mmB = [
  "B覆盖剂配方",
  "B覆盖剂实际",
  "B配方覆盖剂设定值",
  "B配方球化剂设定值",
  "B配方选择",
  "B配方孕育剂设定值",
  "B球化剂配方",
  "B球化剂实际",
  "B孕育剂配方",
  "B孕育剂实际",
  "B产品代号",
  "B包次实际",
  "B包次设定",
  "A配方球化剂上工差",
  "A配方球化剂下工差",
  "出铁目标重量",
  "出铁目标时间",
];
let mmC = [
  "C覆盖剂配方",
  "C覆盖剂实际",
  "C配方覆盖剂设定值",
  "C配方球化剂设定值",
  "C配方选择",
  "C配方孕育剂设定值",
  "C球化剂配方",
  "C球化剂实际",
  "C孕育剂配方",
  "C孕育剂实际",
  "C产品代号",
  "C包次实际",
  "C包次设定",
  "A配方覆盖剂上工差",
  "A配方覆盖剂下工差",
  "加料后>50kg2s后时间",
  "环境温度",
];

function splitArrayByCount(arr, count) {
  const result = [];
  for (let i = 0; i < arr?.length; i += count) {
    result.push(arr.slice(i, i + count));
  }
  return result;
}

watch(
  () => planBIDTOS,
  (newVal) => {
    console.log(newVal.value);
    if (newVal.value?.bodys?.length > 0) {
      const [arr1, arr2, arr3] = splitArrayByCount(newVal.value.bodys, 17);

      tableDataA.value = arr1;
      tableDataB.value = arr2;
      tableDataC.value = arr3;
    }

    // tableDataC.value.splice(0, 2);
    // tableDataA.value.forEach((item, index) => {
    //   item.name = mmA[index];
    // });
    // tableDataB.value.forEach((item, index) => {
    //   item.name = mmB[index];
    // });
    // tableDataC.value.forEach((item, index) => {
    //   item.name = mmC[index];
    // });
  },
  {
    deep: true,
    immediate: true,
  }
);

// 行样式解析
function tableRowClassName(rowIndex: any) {
  if (rowIndex.rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
}

function tableHeaderRowClassName() {
  if (tableColumnNum.value === 10) {
    return "h-[50px]";
  }
  return "h-[50px]";
}

// 表格百分比处理
function handlePercentage(percent: any) {
  // let result = "";
  // if (percent && percent.includes("%")) {
  //   result = percent.split("%")[0];
  // }
  // console.log("Number(result)", Number(result));
  return Number(percent) || 0;
}

// 判断是否显示百分比
function isShowPercentage(row: any, title: string) {
  if (title == "1") {
    if (row.meltedStatus) {
      return true;
    } else {
      return false;
    }
  }
  if (title == "2") {
    if (row.modelingStatus) {
      return true;
    } else {
      return false;
    }
  }
  if (title == "3") {
    if (row.pouringStatus) {
      return true;
    } else {
      return false;
    }
  }
  // if (row?.id) {
  //   return true;
  // } else {
  //   return false;
  // }
}
// 判断显示多少百分比

function PercentageData(row: any, id: string) {
  // if (row?.id) {
  //   if (!row.meltedStatus) {
  //     return 0;
  //   }
  //   if (row.meltedStatus && row.modelingStatus) {
  //     return Number(2 / 3).toFixed(2) * 100;
  //   }
  //   if (row.meltedStatus && row.modelingStatus && row.pouringStatus) {
  //     return 100;
  //   }
  // } else {
  //   return 0;
  // }
  if (id == "1") {
    if (row.meltedStatus == 1) {
      return Number(1 / 2).toFixed(2) * 100;
    } else if (row.meltedStatus == 2) {
      return Number(2 / 2).toFixed(2) * 100;
    }
  }
  if (id == "2") {
    if (row.modelingStatus == 1) {
      return Number(1 / 2).toFixed(2) * 100;
    } else if (row.modelingStatus == 2) {
      return Number(2 / 2).toFixed(2) * 100;
    }
  }
  if (id == "3") {
    if (row.pouringStatus == 1) {
      return Number(1 / 2).toFixed(2) * 100;
    } else if (row.pouringStatus == 2) {
      return Number(2 / 2).toFixed(2) * 100;
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-wrap {
  width: 100%;
  height: 890px;
  overflow: hidden;
}
.scroll-header,
.scroll-content {
  width: 100%;
  display: flex;
}
.scroll-list {
  width: 100%;
  overflow: hidden;
}
.scroll-ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-li {
  width: 100%;
  display: flex;
  line-height: 55px;
}
// .scroll-li > span {
//   display: flex;
//   height: 35px;
//   line-height: 35px;
//   border-top: 1px solid #dcdfe6;
//   border-left: 1px solid #dcdfe6;
//   padding-left: 5px;
//   overflow: hidden;
// }
// .scroll-li > span:last-child {
//   border-right: 1px solid #dcdfe6;
// }
// .scroll-header .scroll-li {
//   background-color: #f8f9ff;
// }
// .scroll-header .scroll-li > span {
//   font-weight: bold;
//   border-top: none;
// }
// .scroll-content .scroll-ul:last-child .scroll-li {
//   border-bottom: 1px solid #dcdfe6;
// }
:deep(.bottom-table .el-table__header) {
  display: none;
}

:deep(.top-table .el-table__body-wrapper) {
  display: none;
}
// 整体表格样式
:deep(.el-table) {
  .el-table__border-left-patch {
    width: 0;
  }

  thead {
    // height: 78px;
    // background: rgba(15, 36, 62, 0.6);
    background: rgba(2, 79, 173, 0.3);
    .cell {
      font-size: 22px;
      line-height: 25px;
      writing-mode: horizontal-tb;
      word-spacing: 0px;
      writing-mode: horizontal-tb;
      text-orientation: upright;
      color: transparent;
      background: linear-gradient(
          0deg,
          rgb(88, 175, 255) 0px,
          rgb(255, 255, 255) 100%
        )
        text;
      clip-path: inset(1px);
    }

    tr:nth-last-child(1) {
      border-right: none;
    }
  }
  tbody {
    tr {
      height: 30px;
      .cell {
        font-size: 20px;
        line-height: 30px;
      }
    }
    tr:hover {
      background-color: rgb(55, 90, 136) !important;
    }
    td.el-table__cell {
      background-color: transparent !important;
      border: none !important;
    }
  }

  .el-table__empty-text {
    color: rgb(199, 228, 240);
    font-size: 30px;
    line-height: 200px;
  }
}
// 单行样式
:deep(.evenRow) {
  background: rgba(15, 36, 62, 0.6);
  td {
    .cell {
      color: rgb(104, 201, 240);
    }
  }
}

// 双行样式
:deep(.oddRow) {
  background: rgba(10, 24, 42, 0.6);
  td {
    .cell {
      color: rgb(168, 190, 216);
    }
  }
}
// :deep(.el-progress) {
//   .el-progress-bar__outer {
//     background: rgba(74, 97, 126, 0.7);
//   }
//   .el-progress-bar__innerText {
//     font-size: 30px;
//     line-height: 40px;
//   }
//   .el-progress-bar__outer {
//     border-radius: 8px;
//   }
//   .el-progress-bar__inner {
//     border-radius: 8px;
//     background-image: linear-gradient(to right, #fa5a53, #fa5a53);
//   }
// }

:deep(.el-progress) {
  .el-progress-bar__outer {
    background: rgba(74, 97, 126, 0.7);
  }
  .el-progress-bar__innerText {
    font-size: 20px;
    margin-bottom: 20px;
  }
  // .el-progress-bar__outer {
  //   border-radius: 8px;
  // }
  // .el-progress-bar__inner {
  //   border-radius: 8px;
  //   background-image: linear-gradient(to right, #fa5a53, #fa5a53);
  // }
}

:deep(.el-table th.el-table__cell > .cell) {
  white-space: pre;
  // white-space: pre-wrap; // 也行。
}

.crilcle {
  width: 70px;
  height: 30px;
  border-radius: 5px;
}
</style>
